<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户端-及时通信</title>
    <link rel="stylesheet" href="./layui2_9/css/layui.css">
    <style type="text/css">
        #container {
            width: 100%;
            height: 350px;
            border: 1px solid #7b6b6b;
            margin: 0 auto;
            position: relative;

        }

        #content {
            width: 100%;
            height: 300px;
            border-bottom: 1px solid #ccc;
            overflow-y: auto;

        }

        #content ul {
            margin: 0;
            padding: 0;

        }

        #Img {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 10px;
            top: 310px;
            border-radius: 15px;

        }

        #txt {
            margin: 0;
            position: absolute;
            left: 50px;
            top: 302px;
            border-radius: 2px;
            border: 1px solid #ccc;
            width: 80%;
            height: 45px;
            font-size: 20px;

        }

        #btn {
            margin-right: 5px;
            margin-top: 3px;
            float: right;
            width: 12%;
        }

        #edit {
            background: #ece7e766;
            width: 100%;
            height: 50px;

        }

        .showTxt {
            width: auto;
            height: auto;
            max-width: 230px;
            background: #008000a8;
            border: 0;
            font-size: 15px;
            color: white;
            padding: 5px;
            border-radius: 2px;
            word-break: break-all;
            list-style: none;
            margin-top: 5px;
            display: list-item;

        }

        .left {
            text-align: left;
            margin-left: 50px;
            float: left;

        }

        .right {
            text-align: right;
            margin-right: 50px;
            float: right;

        }

        .showImg {
            width: 36px;
            height: 36px;
            border-radius: 13px;

        }

        .leftImg {
            left: 10px;
            position: absolute;

        }

        .rightImg {
            right: 10px;
            position: absolute;

        }

        #scroll {
            position: relative;

        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- 内容主体区域-->
    <div class="layui-body">
        <div style="padding: 30px;" class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <span class="layui-badge-dot"></span> <span
                        class="layui-badge-dot layui-bg-orange"></span> <span
                        class="layui-badge-dot layui-bg-green"></span> <span
                        class="layui-badge-dot layui-bg-cyan"></span> <span
                        class="layui-badge-dot layui-bg-blue"></span> <span
                        class="layui-badge-dot layui-bg-black"></span> <span
                        class="layui-badge-dot layui-bg-gray"></span>
                    <fieldset class="layui-elem-field layui-field-title"
                              style="margin-top: 30px;">
                        <legend>即时通信</legend>
                    </fieldset>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md1">&nbsp;</div>

                <!--群聊消息区-->
                <div class="layui-col-md8">
                    <fieldset class="layui-elem-field">
                        <legend>群聊消息区：</legend>
                        <form id="talkAll" class="layui-form layui-form-pane" lay-filter="formFilter"
                              action="javascript:void(0)" method="post" style="padding: 30px;">
                            <div class="layui-form-item layui-form-text">
                                <div class="layui-input-block">

                                    <div id="container">

                                        <div id="content">
                                            <div id="scroll">
                                                <ul id="save"></ul>
                                            </div>
                                        </div>

                                        <div id="edit">
                                            <img src="layui2_9/images/user01.jpg" id="Img" width="100%" height="200px">
                                            <input type="text" name="" id="txt">
                                            <button type="button" class="layui-btn layui-btn-lg" id="btn">发送</button>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </form>
                    </fieldset>
                </div>

                <!--在线人数：-->
                <div class="layui-col-md3">
                    <div class="layui-panel" style="width: 80%; height:430px;margin: 16px;overflow: scroll">
                        <ul class="layui-menu" id="demo-menu">
                            <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
                                <div class="layui-menu-body-title">
                                    在线人员列表（1/3）：<i class="layui-icon layui-icon-up"></i>
                                </div>
                                <ul>
                                    <li lay-options="{id: 103}">
                                        <div class="layui-menu-body-title">
                                            <img src="layui2_9/images/user01.jpg" width="20px" height="20px">
                                            <a href="javascript:showPrivate('小灰')" style="display: inline">小灰</a>
                                        </div>
                                    </li>
                                    <li lay-options="{id: 103}">
                                        <div class="layui-menu-body-title">
                                            <img src="layui2_9/images/user02.png" width="20px" height="20px">
                                            <a href="javascript:showPrivate('小蓝')" style="display: inline">小蓝</a>
                                        </div>
                                    </li>
                                    <li lay-options="{id: 103}">
                                        <div class="layui-menu-body-title">
                                            <img src="layui2_9/images/user03.jpg" width="20px" height="20px">
                                            <a href="javascript:showPrivate('小红')" style="display: inline">小红</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="layui-col-md1">&nbsp;</div>
            </div>

        </div>

    </div>

    <div class="layui-footer" align="center">
        <!-- 底部固定区域 -->
        © - 联系校事达官方客服：6666666
    </div>
</div>
<script src="./layui2_9/layui.js"></script>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
        // 监听侧边导航栏的点击事件
        element.on('nav(test)', function (elem) {
            var parentLi = elem.closest('li.layui-nav-item');
            var allNavItems = document.querySelectorAll('.layui-nav-tree.layui-nav li.layui-nav-item');
            // 遍历所有导航项
            allNavItems.forEach(function (item) {
                if (item!== parentLi) {
                    // 关闭其他导航项的子菜单
                    var childMenu = item.querySelector('dl.layui-nav-child');
                    if (childMenu) {
                        // 移除 layui-nav-itemed 类以关闭菜单
                        // item.classList.remove('layui-nav-itemed');
                    }
                }
            });
            // 切换当前点击的导航项的展开/关闭状态
            // parentLi.addClass("layui-nav-itemed")
        });
    });
</script>

<script>
    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            $ = layui.$,
            laydate = layui.laydate;

        //自定义验证规则
        form.verify({
            taskname: function (value) {
                if (value.length < 2) {
                    return '标题太短了啊';
                }
            },
            reward: function (value) {
                if (value.length <= 0) {
                    return '请输入奖励内容';
                }
            },
            taskcontext: function (value) {
                if (value.length < 1) {
                    return '任务详细描述太短';
                }
            },
            publishScholName: function (value) {
                if (value.length <= 0) {
                    return '请选择学校';
                }
            }
        });

        //创建一个编辑器
        layedit.build('LAY_demo_editor');

        //监听提交
        form.on('submit(reform)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
                title : '最终的提交信息'
            })*/
            //return false;
        });


        $(function () {
            form.on('select(publishSchoolId)', function (data) {
                $("#publishSchoolName").val(this.innerHTML);
            });


            $.post(
                "userNewtask.html",
                function (data) {
                    var obj = JSON.parse(data);
                    var str = "";
                    for (var i = 0; i < obj.length; i++) {
                        var optionStr = "";
                        optionStr += "<option value='" + obj[i].schoolid + "'>" + obj[i].name + "</option>";
                        $("#publishSchoolId").append(optionStr);
                        form.render('select', 'formFilter');

                        $("#publishSchoolName").val(obj[0].name);
                    }
                }
            );
        });


    });


</script>
<script>
    layui.use(function () {
        var dropdown = layui.dropdown;
        // 绑定输入框
        dropdown.render({
            elem: '#ID-dropdown-demo-base-input',
            closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
            data: [{
                title: '中南大学',
                id: 101
            }, {
                title: '湖南大学',
                id: 102
            }, {
                title: '长沙大学',
                id: 103
            }],
            click: function (obj) {
                this.elem.val(obj.title);
            },
            style: 'min-width: 235px;'
        })
    });
</script>
<script>
    var ws = new WebSocket("ws://localhost:8080/publicWS");

    ws.onopen = function () {
    };

    ws.onmessage = function (message) {
        document.getElementById("talkMsg").innerHTML = message.data;
    };

    ws.onclose = function () {
    };

    function sendMsg() {
        //WebSocket发送
        //var username = document.getElementById("username").innerText;
        //var message = document.getElementById("message").value;
        //ws.send(username + " : " + message);//我：大家好
        //document.getElementById("message").value = "";
    }

</script>
<script>
    //获取元素
    var oCont = document.getElementById('content');
    var oImg = document.getElementById('Img');
    var oTxt = document.getElementById('txt');
    var oBtn = document.getElementById('btn');
    var oSTxt = document.getElementsByClassName('showTxt');
    var oSave = document.getElementById('save');
    var num = 0;

    //切换头像
    oImg.onclick = function () {
        num++;
        if (num % 2 == 0)
            oImg.src = '1.jpg';
        else
            oImg.src = '2.png';

    }

    //发送事件
    oBtn.onclick = function () {
        addCon();

    }

    function addCon() {
        if (oTxt.value.trim().length == 0) {
            return;
        }

        //发送

        //定义需要添加的元素
        var newLi = document.createElement("li");
        var newImg = document.createElement('img');

        //添加对话框
        newLi.innerHTML = oTxt.value;
        newLi.className = 'showTxt right';
        oSave.appendChild(newLi);
        //oTxt.value = '';

        //添加头像
        newImg.src = oImg.src;
        newImg.className = 'showImg rightImg';
        newLi.appendChild(newImg);

        //清除浮动
        var div = document.createElement('div');
        div.style = 'clear:both';
        oSave.appendChild(div);

        //2秒后回复
        window.setTimeout(function(){

            //定义需要添加的元素
            var newLi = document.createElement("li");
            var newImg = document.createElement('img');

            //添加对话框
            newLi.innerHTML = oTxt.value;
            newLi.className = 'showTxt left';
            oSave.appendChild(newLi);
            oTxt.value = '';

            //添加头像
            newImg.src = "layui2_9/images/xsd.png";
            newImg.className = 'showImg leftImg';
            newLi.appendChild(newImg);
            var div = document.createElement('div');
            div.style = 'clear:both';
            oSave.appendChild(div);

        },1000);

    }
</script>
<script>
    function showPrivate(value) {
        window.sessionStorage.setItem("username", value);
        //iframe层
        layer.open({
            type: 2,
            title: '即时通信',
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            area: ['1000px', '600px'],
            content: 'userTalk.html'
        });
    }
</script>
</body>
</html>
